<div class="design-tree-container">
    <context-menu-container>
        <el-tree
            v-if="inited"
            ref="treeexpbar_tree"
            class="design-tree"
            node-key="id"
            lazy
            :show-checkbox="!isSingleSelect"
            :check-on-click-node="!isSingleSelect"
            :default-expanded-keys="expandedKeys"
            :props="{
                label: 'text',
                isLeaf: 'leaf',
                children: 'children'
            }"
            :load="load.bind(_self)"
            :highlight-current="true"
            :expand-on-click-node="false"
            @check="onCheck.apply(_self, arguments)"
            @current-change="selectionChange.apply(_self, arguments)"
            :filter-node-method="filterNode"
            :empty-text="$t('entities.doclib.looproductdoclibtree_treeview.nodata')"
        >
            <template slot-scope="{ node, data }">
                <div class="tree-content">
                    <context-menu
                        :ref="data.id"
                        :isBlocked="true"
                        :contextMenuStyle="{width: '100%'}"
                        :data="node"
                        :renderContent="($event) => renderContextMenu($event)"
                        @showContext="showContext(data,$event)"
                    >
                        <tooltip transfer style="width: 100%;" max-width="2000" placement="right">
                            <div class="tree-node" @dblclick="doDefaultAction(node)">
                                <span class="icon">
                                    <i v-if="data.iconcls && !Object.is(data.iconcls, '')" :class="data.iconcls"></i>
                                    <img v-else-if="data.icon && !Object.is(data.icon, '')" :src="data.icon">
                                    <icon v-else-if="isOutputIconDefault" type="ios-paper-outline"></icon>&nbsp;
                                </span>
                                <span class="text">
                                    <span v-if="data.html" v-html="data.html"></span>
                                    <span v-else>{{ data.isUseLangRes ? $t(data.text) : data.text }}</span>
                                </span>
                            </div>
                            <template slot="content">
                                <span v-if="data.html" v-html="data.html"></span>
                                <span v-else>{{ data.isUseLangRes ? $t(data.text) : data.text }}</span>
                            </template>
                        </tooltip>
                    </context-menu>
                    <Icon class="content-more" type="md-more" @click.stop="($event) => showContext(data, $event)"/>
                </div>
            </template>
        </el-tree>
    </context-menu-container>
</div>